<template>
    <div>
        <el-dialog v-model="visible"
                   width="500"
                   :show-close="false"
                   :align-center="true"
                   @open="dialogOpen"
                   @close="dialogClose">

            <!--header-->
            <template #header="{ close, titleId, titleClass }">
                <div class="dialog-header">
                    <div :id="titleId"
                         class="dialog-header-title">
                        {{ title }}
                    </div>
                    <el-icon class="dialog-header-close"
                             @click="closeClick">
                        <CloseBold/>
                    </el-icon>
                </div>
            </template>

            <!--center-->
            <div class="dialog-center">
                <slot></slot>
            </div>

            <!--footer-->
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary"
                               @click="confirmClick()">
                        确认
                    </el-button>
                    <el-button @click="closeClick">取消</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">

    defineOptions({
        name: 'com-el-dialog-ex'
    })

    //region # 属性

    // 标题
    const title = defineModel('title', { type: String, required: true })

    // 显示状态
    const visible = defineModel('visible', { type: Boolean, required: true })

    // 组件事件列表
    const emits = defineEmits([ 'open', 'confirm', 'cancel' ]);

    //endregion

    //region # 方法

    // Action

    /**
     * 确认点击
     * */
    const confirmClick = () => {
        emits('confirm');
    };

    /**
     * 关闭点击
     * */
    const closeClick = () => {
        visible.value = false
    }

    /**
     * 会话窗口打开
     * */
    const dialogOpen = () => {
        emits('open');
    };

    /**
     * 会话窗口关闭
     * */
    const dialogClose = () => {
        emits('cancel');
    };

    // Private


    //endregion

    //region # 事件

    /**
     * 加载完毕
     * */
    onMounted(async () => {
    })
    
    //endregion

</script>

<style scoped>
    @import "com-el-dialog-ex.less";
</style>